<template>

    <div class="search-bar">
        <el-form :inline="true">

            <el-form-item label="昵称">
                <el-input v-model="filters.name" placeholder="昵称" />
            </el-form-item>

            <el-form-item label="手机号">
                <el-input v-model="filters.telephone" placeholder="手机号" />
            </el-form-item>

            <el-form-item label="群组">
                <el-select v-model="filters.customer_group_id">
                    <el-option v-for="item in customer_group_list" :key="item.id" :label="item.name"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="do_search">搜索</el-button>
            </el-form-item>
        </el-form>

    </div>

    <el-table :data="customer_list" highlight-current-row @current-change="" style="width: 100%">
        <el-table-column property="id" label="客户ID" width="">
        </el-table-column>
        <el-table-column property="headUrl" label="头像" width="">
            <template #default="scope">
                <img style="width: 50px; border-radius: 10px;" :src="scope.row.headUrl" alt="">
            </template>
        </el-table-column>
        <el-table-column property="name" label="昵称" width="">
        </el-table-column>
        <el-table-column property="telephone" label="手机号" width="">
        </el-table-column>
        <el-table-column property="customer_group" label="群组" width="">
        </el-table-column>
        <el-table-column property="create_time" label="注册日期" width="">
        </el-table-column>
        <el-table-column property="" label="管理" width="">
            <template #default="scope">

                <a class="el-button el-button--primary" :href="'/main/customer/edit/' + scope.row.id"> 查看 </a>
            </template>
        </el-table-column>
    </el-table>

    <div class=" table-below ">

        <el-pagination @current-change="changePage" :page-size="per_page" layout="prev, pager, next" :total="total" />
    </div>
</template>

<script lang="ts" setup>

import { ref } from "vue";
import axios from "axios";
const VITE_URL = window.VITE_URL;
const customer_group_list:any = ref<Array<object>>([])
const total = ref<number>(10)
const per_page = ref<number>(15)
const current_page = ref<number>(1)

const filters:any = ref<object>({

    name: '',
    telephone: '',
    customer_group_id: 0
})
const customer_list = ref<Array<object>>([]);

const get_customer_group_list = () => {

    const url = VITE_URL + '/admin.customerGroup/index'
    axios.get(url).then(res => {

        customer_group_list.value = res.data;
        customer_group_list.value.unshift( {
            name:'所有群组',
            id:0
        } )
    })

}
get_customer_group_list();
const get_customer_list = () => {

    let url: string = VITE_URL + '/admin.customer/index';
    url += '?page=' + current_page.value

    if (filters.value.customer_group_id) {
        url += '&customer_group_id=' + filters.value.customer_group_id
    }
    if (filters.value.name) {
        url += '&name=' + filters.value.name
    }
    if (filters.value.telephone) {
        url += '&telephone=' + filters.value.telephone
    }

    axios.get(url).then(res => {

        customer_list.value = res.data.list
        total.value = res.data.page.total
    })

}

get_customer_list();

const do_search = () => {

    get_customer_list();

}

const changePage = (page:any) => {

    current_page.value = page;
    get_customer_list();

}

</script>